﻿<script id="View-Dashboard-Stock" type="text/html">

    <!-- ko with:new StockDashboardViewModel(Id) -->
    <div class="row bg-white" style="margin-left:10px" data-bind="with: Stock">
        <div class="col-xs-6">
        <h2  data-bind="text: Name, PageTitle: $parent.Id"></h2>
        </div>
        <div class="col-xs-6">
            <dl class="horizontal">
                <dt>IPO Year</dt>
                <dd data-bind="text: IPOyear"></dd>
                <dt>Sector</dt>
                <dd data-bind="text: Sector"></dd>
                <dt>Industry</dt>
                <dd data-bind="text: Industry"></dd>
                <dt>Stock Exchange</dt>
                <dd data-bind="text: StockExchange"></dd>
                <dt>Linq</dt>
                <dd><a data-bind="attr: { href: SummaryQuote }">Go</a></dd>
            </dl>
        </div>
    </div>
    <div style="padding-top: 15px" class="row">
        <div class="col-md-12">
            <div  class="panel">
                <div class="panel-header bd-lime bg-white">
                    <!-- ko text:Id -->
                    <!-- /ko -->
                    <div class="toolbar transparent place-right">
                        <button class="fg-lime" data-bind="click: SwitchChart, css: { 'icon-stats-up': IsLineChartType, 'icon-stats': !IsLineChartType() }"></button>
                        <button class="icon-filter fg-lime" data-bind="click: function () { FilterChart(!FilterChart()); }"></button>
                    </div>

                </div>
                <div style="padding-bottom:15px" class="panel-content bg-white ">
                    <!-- ko if:HistoricalChartSettings()!=null&& HistoricalRangeChartSettings()!=null-->
                    <div style="height: 350px" id="historicalChart" data-bind="dxChart: HistoricalChartSettings,RangeChart:ChartWidget">
                    </div>
                     <!-- ko if:FilterChart-->
                    <div style="margin-top:10px;height: 150px" id="historicalRangeChart" data-bind="dxRangeSelector: HistoricalRangeChartSettings">
                    </div>
                     <!-- /ko -->
                    <!-- /ko -->
                </div>
            </div>
        </div>
    </div>

    <div style="padding-top: 15px" class="row">
        
        <div class="col-md-6" data-bind="with: StockData">
            <div style="padding-bottom: 5px;font-size:15px;border:solid 2px" class="panel-content bg-white row" 
                data-bind="css: { 'bd-green': parseFloat(Change.replace($parent.Quotes, '')) > 0, 'bd-red': parseFloat(Change.replace($parent.Quotes, '')) < 0,}">
                <div class="col-xs-5" style="text-align:center;padding:0px 5px" >
                    <h3>Last Price</h3>
                    <div  style="font-size:25px;" data-bind="css: { 'fg-green': parseFloat(Change.replace($parent.Quotes, '')) > 0, 'fg-red': parseFloat(Change.replace($parent.Quotes, '')) < 0, }">
                        <i style="font-size: 25px" data-bind="css: { 'icon-arrow-up-4': parseFloat(Change.replace($parent.Quotes, '')) > 0, 'icon-arrow-down-4': parseFloat(Change.replace($parent.Quotes, '')) < 0, }"></i>
                        <!-- ko text: parseFloat(LastTradePriceOnly.replace($parent.Quotes, '')) -->
                        <!-- /ko -->
                    </div>
                </div>
                <dl class="horizontal col-xs-7">
                    <dt style="width: 130px">Ask</dt>
                    <dd style="margin-left:140px" data-bind="text: AskRealtime"></dd>
                    <dt style="width: 130px">Bid</dt>
                    <dd style="margin-left:140px" data-bind="text: BidRealtime"></dd>
                    <dt style="width: 130px">Last Trade Date</dt>
                    <dd style="margin-left:140px" data-bind="text: LastTradeDate"></dd>
                    <dt style="width: 130px">Last Trade Time</dt>
                    <dd style="margin-left:140px" data-bind="text: LastTradeTime"></dd>
                </dl>
            </div>
        </div>

        <div class="col-md-6">
             <div style="padding-bottom:10px" class="panel">
                <div class="panel-header bd-lime bg-white">
                    <i style="font-size: 15px" class="fg-lime icon-dashboard"></i>                        
                    Performance
                </div>
                <div style="padding-bottom:5px" class="panel-content bg-white">
                     <!-- ko if:PerformanceGauge()!=null-->
                    <div style="height:300px" data-bind="dxBarGauge:PerformanceGauge"></div>
                   <!-- /ko -->
                </div>
            </div>
        </div>
    </div>

     <div style="position:absolute;background:black;margin-left:50%;margin-top:30%" data-bind="Loading: Loading"></div>
    <!-- /ko -->

</script>
